<script>
  import sheep from '@/sheep';
  import { pathToBase64 } from 'image-tools';
  import dayjs from 'dayjs';
  import surname from '@/sheep/api/surname';

  export default {
    data() {
      return {
        currentWidth: 0,
        // 是否显示组件
        isShow: false,
        avatarHead: '',
        listAvatarList: [],
        db: null,
        is_flag: 0,
      };
    },
    name: 's-character-card',
    props: {
      info: {
        type: Object,
        default: () => {
          return {
            name: '父亲',
          };
        },
      },
      isOwnFlag: {
        type: Boolean,
        default: false,
      },
      isTopLevel: {
        type: Boolean,
        default: false,
      },
      index: {
        type: Number,
        default: 0,
      },
      length: {
        type: Number,
        default: 0,
      },
      is_init: 0,
      is_create: 0,
      generation: 0,
      id: 0,
      listWidth: 0,
      centerId: 0,
      endId: 0,
      is_simple: 0,
      show_die_gray: 0,
      genealogicalHead: {
        type: Object,
        default: () => {
          return {};
        },
      },
      genealogicalRanking: {
        type: Number,
        default: 0,
      },
      zibei_List: {
        type: Array,
        default: () => {
          return [];
        },
      },
      is_first: false,
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
      center_list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      treeInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      dynamicPage: {
        type: Number,
        default: 1,
      },
    },
    computed: {
      sheep() {
        return sheep;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      shi_count() {
        return this.treeInfo.top_list.shi_count;
      },
    },
    async mounted() {
      // 加载时间
      console.log('加载时间=>', dayjs().format('HH:mm:ss'));
      await sheep.$store('family').setMemberNum(sheep.$store('family').memberNum + 1);
      this.isShow = true;
      if (this.treeInfo.top_list.has_center == 1) {
        if (this.info.id == this.centerId) {
          console.log('中心点', this.centerId);
          uni.$on(`acquire${this.dynamicPage}`, async () => {
            await this.getPosition(`male_${this.info.id}`, false, this.info);
            uni.$off(`acquire${this.dynamicPage}`);
          });
        }
      } else {
        if (this.genealogicalRanking == this.treeInfo.top_list.shi_count && !this.options.is_confirm) {
          let arr = [];
          for (const arrElement in this.center_list) {
            if (this.center_list[arrElement] == this.info.id) {
              arr.push(this.info);
            }
          }
          if (arr.length > 0) {
            uni.$off(`acquire${this.dynamicPage}`);
            uni.$on(`acquire${this.dynamicPage}`, async () => {
              this.is_flag++;
              await this.getPosition(`male_${arr[0].id}`, false, arr[0]);
              uni.$emit(`setCenterInfo_${this.dynamicPage}`, arr[0])
              uni.$off(`acquire${this.dynamicPage}`);
            });

            uni.$on(`closeAcquire${this.dynamicPage}`, () => {
              uni.$off(`acquire${this.dynamicPage}`);
              uni.$off(`closeAcquire${this.dynamicPage}`);
            });
          }
        }
        if (this.info.id == this.options.member_id) {
          console.log('中心点', this.options.member_id);
          uni.$on(`acquire${this.dynamicPage}`, async () => {
            await this.getPosition(`male_${this.info.id}`, false, this.info);
            uni.$off(`acquire${this.dynamicPage}`);
          });
        }
      }
      uni.$on('unload', () => {
        uni.$off('loadSuccess');
        uni.$off('setAvatar_genealogy');
        uni.$off('unload');
        uni.$off('setFirstAvatar');
        uni.$off(`acquire${this.dynamicPage}`);
      });
      uni.$emit(`setTreeList_${this.dynamicPage}`,{ id: this.info.id, memberInfo: this.info })
      // 查询每个卡片的坐标
      uni.$on(`memberModule_${this.info.id}`, async () => {
        await this.getPosition(`male_${this.info.id}`, true, this.info);
      });
      // 删除卡片
      uni.$on(`delete_${this.info.id}`, async () => {
        this.$emit('delete_card', {id:this.info.id,is_spouse:false})
      });

      // 循环配偶是否是中心点
      for (let i = 0; i < this.info.spouse_val.length; i++) {
        if (this.info.spouse_val[i].id == this.centerId) {
          uni.$on(`acquire${this.dynamicPage}`, async () => {
            await this.getPosition(`male_${this.info.spouse_val[i].id}`, true, this.info.spouse_val[i]);
            uni.$off(`acquire${this.dynamicPage}`);
          });
          await uni.$emit(`${this.dynamicPage}`, true);
        }
        // 建立事件通讯查询每个组件的位置
        uni.$emit(`setTreeList_${this.dynamicPage}`,{ id: this.info.spouse_val[i].id, memberInfo: this.info.spouse_val[i] })
        uni.$on(`memberModule_${this.info.spouse_val[i].id}`, async () => {
          await this.getPosition(`womale_${this.info.spouse_val[i].id}`, false, this.info.spouse_val[i]);
        });
        // 建立事件通讯删除卡片
        uni.$on(`delete_${this.info.spouse_val[i].id}`, async () => {
          this.$emit('delete_card', {id:this.info.id,is_spouse:true,spouseId:this.info.spouse_val[i].id})
        });
      }
      if (this.is_first) {
        uni.$emit(`generationChange${this.dynamicPage}`);
      }
      this.$nextTick(async () => {
        uni.$emit(`setMemberList${this.dynamicPage}`, this.info.id);
        for (let i = 0; i < this.info.spouse_val.length; i++) {
          await sheep.$store('family').setMemberNum(sheep.$store('family').memberNum + 1);
          uni.$emit(`setMemberList${this.dynamicPage}`, this.info.spouse_val[i].id);
        }

        // if (sheep.$store('family').memberNum >= this.treeInfo.top_list.all_count) {
        //   console.log(12);
        //   await uni.$emit(`changeWidth${this.dynamicPage}`, true);
        // }
      });


    },
    updated() {
      this.$nextTick(async () => {
        if (this.info.id == this.endId) {
          // #ifndef MP-WEIXIN
          this.$nextTick(async () => {
            await uni.$emit(`changeWidth${this.dynamicPage}`, true);
          });
          // #endif
        }
      });
    },
    methods: {
      addMember(info) {
        this.$emit('addMember', info);
      },
      // 查询元素位置
      getPosition(id, flag = false, info = {}) {
        this.$nextTick(() => {
          setTimeout(() => {
            const query = uni.createSelectorQuery().in(this);
            query.select(`#${id}`).boundingClientRect(async res => {
              if (!flag) {
                console.log(res,id, '中心点坐标');
                console.log('查找时间=>', dayjs().format('HH:mm:ss'),this.dynamicPage);
                await uni.$emit(`setCoordinate${this.dynamicPage}`, { info: res, memberInfo: info });
                // await uni.$emit('singleSearch', { info: res, memberInfo: info });
              } else {
                await uni.$emit('singleSearch', { info: res, memberInfo: info });
              }
            }).exec();
          }, 5);
        });
      },
      openAddPersonnelPopup(info) {
        this.$emit('openAddPersonnelPopup', info);
      },
      changeWidth() {
        uni.$emit(`changeWidth${this.dynamicPage}`);
      },
      // 点击展开跳转家谱
      clickToExpand(item) {
        // #ifdef H5
        // 判断浏览器是否是微信浏览器
        window.open(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${this.options.id}&name=${this.options.name}-${item.surname + item.name}节点&add_time=${this.options.add_time}&username=${this.options.username}&is_firstScreen=true&member_id=${item.id}&is_confirm=true&dynamicPage=${this.dynamicPage + 1}`);

        // console.log(123123);
        // location.replace(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${this.options.id}&name=${this.options.name}-${item.surname + item.name}节点&add_time=${this.options.add_time}&username=${this.options.username}&is_firstScreen=true&member_id=${item.id}`);
        // #endif
        // #ifndef H5
        this.phoneJump(item);
        // #endif
      },
      // 手机模式下的跳转页面
      phoneJump(item) {
        sheep.$router.go('/pages/genealogy/management', {
          id: this.options.id,
          name: `${this.options.name}-${item.surname + item.name}节点`,
          add_time: this.options.add_time,
          username: this.options.username,
          is_firstScreen: true,
          member_id: item.id,
          dynamicPage: this.dynamicPage + 1,
        });
      },
      // 循环匹配头像
      setAvatar() {
        this.$nextTick(async () => {
          let that = this;
          this.listAvatarList = [];
          for (const key in this.genealogicalHead) {
            if (key == this.info.id) {
              // #ifdef H5
              if (!!Number(this.genealogicalHead[key].head)) {
                const db = await this.initData('avatar_sql');
                if (db) {
                  const obj = await this.getData(db, Number(`${this.genealogicalHead[key].head}?x-oss-process=image/format,jpg/quality,Q_80`), 'avatar_sql');
                  if (!!obj) {
                    this.avatarHead = obj;
                  } else {
                    await sheep.$store('app').setAvatar();
                    this.avatarHead = await this.getData(db, Number(`${this.genealogicalHead[key].head}?x-oss-process=image/format,jpg/quality,Q_80 `), 'avatar_sql');
                  }
                }
              } else {
                const db = await this.initData();
                if (db) {
                  const obj = await this.getData(db, this.genealogicalHead[key].head);
                  if (!obj) {
                    const url = await pathToBase64(this.genealogicalHead[key].head.indexOf('http') != -1 ? `${this.genealogicalHead[key].head}?x-oss-process=image/format,jpg/quality,Q_80 ` : `${this.nc_image + this.genealogicalHead[key].head}?x-oss-process=image/format,jpg/quality,Q_80 `);
                    await this.setData(db, {
                      name: this.genealogicalHead[key].head,
                      url: url,
                      url_origin: this.genealogicalHead[key].head.indexOf('http') != -1 ? `${this.genealogicalHead[key].head}?x-oss-process=image/format,jpg/quality,Q_80 ` : `${this.nc_image + this.genealogicalHead[key].head}?x-oss-process=image/format,jpg/quality,Q_80 `,
                    });
                    this.avatarHead = url;
                  } else {
                    this.avatarHead = obj;
                  }
                }
              }
              // #endif

              // #ifdef APP-PLUS
              if (!!Number(this.genealogicalHead[key].head)) {
                console.log(!!uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`));
                if (!!uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`)) {
                  this.avatarHead = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                  console.log(this.avatarHead);
                } else {
                  await sheep.$store('app').setAvatar();
                  console.log(uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`));
                  this.$nextTick(() => {
                    this.avatarHead = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                  });
                }
              } else {
                if (uni.getStorageSync(this.genealogicalHead[key].head)) {
                  this.$nextTick(() => {
                    this.avatarHead = uni.getStorageSync(this.genealogicalHead[key].head);
                  });
                } else {
                  uni.downloadFile({
                    url: this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head,
                    success: async (res) => {
                      uni.saveFile({
                        tempFilePath: res.tempFilePath,
                        success: async (res2) => {
                          uni.setStorageSync(this.genealogicalHead[key].head, this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head);
                          this.avatarHead = this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head;
                        },
                      });
                    },
                  });
                }
              }
              // #endif

              // #ifdef MP-WEIXIN
              if (!!Number(this.genealogicalHead[key].head)) {
                if (!!uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`)) {
                  this.avatarHead = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                  console.log(this.avatarHead);
                } else {
                  await sheep.$store('app').setAvatar();
                  this.avatarHead = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                }
              } else {
                this.avatarHead = this.genealogicalHead[key].head;
              }
              // #endif

            }
            for (let i = 0; i < this.info.spouse_val.length; i++) {
              if (this.info.spouse_val[i].id == key) {
                // #ifdef H5
                if (!!Number(this.genealogicalHead[key].head)) {
                  const db = await this.initData('avatar_sql');
                  if (db) {
                    const obj = await this.getData(db, Number(this.genealogicalHead[key].head), 'avatar_sql');
                    if (!!obj) {
                      this.listAvatarList.push(obj);
                    } else {
                      await sheep.$store('app').setAvatar();
                      const obj = await this.getData(db, Number(this.genealogicalHead[key].head), 'avatar_sql');
                      this.listAvatarList.push(obj);
                    }
                  }
                } else {
                  const db = await this.initData();
                  if (db) {
                    const obj = await this.getData(db, this.genealogicalHead[key].head);
                    if (!obj) {
                      const url = await pathToBase64(this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head);
                      await this.setData(db, {
                        name: this.genealogicalHead[key].head,
                        url: url,
                        url_origin: this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head,
                      });
                      this.listAvatarList.push(url);
                    } else {
                      this.listAvatarList.push(obj);
                    }
                  }
                }
                // #endif

                // #ifdef APP-PLUS
                if (!!Number(this.genealogicalHead[key].head)) {
                  if (!!uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`)) {
                    const url = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                    this.listAvatarList.push(url);
                  } else {
                    await sheep.$store('app').setAvatar();
                    const url = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                    this.listAvatarList.push(url);
                  }
                } else {
                  if (!!uni.getStorageSync(this.genealogicalHead[key].head)) {
                    this.listAvatarList.push(uni.getStorageSync(this.genealogicalHead[key].head));
                  } else {
                    uni.downloadFile({
                      url: this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head,
                      success: async (res) => {
                        uni.saveFile({
                          tempFilePath: res.tempFilePath,
                          success: async (res2) => {
                            console.log(res2);
                            uni.setStorageSync(this.genealogicalHead[key].head, this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head);
                            this.listAvatarList.push(this.genealogicalHead[key].head.indexOf('http') != -1 ? this.genealogicalHead[key].head : this.nc_image + this.genealogicalHead[key].head);
                          },
                        });
                      },
                    });
                  }
                }
                // #endif

                // #ifdef MP-WEIXIN
                if (!!Number(this.genealogicalHead[key].head)) {
                  if (!!uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`)) {
                    const url = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                    this.listAvatarList.push(url);
                  } else {
                    await sheep.$store('app').setAvatar();
                    const url = uni.getStorageSync(`avatar${Number(this.genealogicalHead[key].head)}`);
                    this.listAvatarList.push(url);
                  }
                } else {
                  this.listAvatarList.push(this.genealogicalHead[key].head);
                }
                // #endif
              }
            }
          }
          uni.$off('setAvatar_genealogy');
        });
      },
      // #ifdef H5
      async initData(name = 'sq_sql') {
        return new Promise((resolve, reject) => {
          let db = null;
          const request = window.indexedDB.open(name, 1);
          request.onerror = () => {
            console.log('数据库打开失败');
            reject();
          };
          request.onsuccess = (event) => {
            db = event.target.result;
            resolve(db);
          };
          request.onupgradeneeded = (event) => {
            db = event.target.result;
            console.log(db.objectStoreNames.contains(name));
            if (!db.objectStoreNames.contains(name)) {
              const treeSpectrumCache = db.createObjectStore(name, { keyPath: 'id', autoIncrement: true });
              treeSpectrumCache.createIndex('name', 'name', { unique: true });
              treeSpectrumCache.createIndex('url', 'url', { unique: true });
              treeSpectrumCache.createIndex('url_origin', 'url_origin', { unique: true });
            }
            resolve(db);
          };
        });
      },
      // 设置数据
      async setData(db, data) {
        return new Promise((resolve, reject) => {
          db.transaction(['sq_sql'], 'readwrite').objectStore('sq_sql').add(data);
          resolve(true);
        });
      },
      async getData(db, name, archive = 'sq_sql') {
        return new Promise((resolve, reject) => {
          const request = db.transaction([archive], 'readwrite').objectStore(archive).index('name').get(name);
          request.onsuccess = (event) => {
            if (!!event.target.result) {
              resolve(event.target.result.url);
            } else {
              resolve(false);
            }
          };
          request.onerror = (event) => {
            reject(false);
          };
        });
      },
      // #endif
    },
  };
</script>

<template>
  <view id="listBollit"
        v-if="!!isShow"
        class="flex align-start justify-center"
        style="position: relative;margin: 0 10rpx"
        :style="{
          marginBottom: isTopLevel ? '0' : !!info.children && info.children.length > 0 ? '10rpx':'0',
          width:  'auto',
        }"
  >
    <!-- #ifdef  MP-WEIXIN -->
    <view v-if="!isTopLevel && length > 1 && index != length - 1"
          class="isTopLevel"
          :style="{
            width: index == 0 && !!info.spouse_val && !info.isHave ? 'calc(100% - 50rpx)' : length - 1 == index && !!info.spouse_val && !info.isHave ? '10%' :  index == 0 || length - 1 == index ? '50%' : '100%',
          }"
          :class="{
            isTopLevelLeft: index == 0,
            isTopLevelRight: length - 1 == index,
          }"
    ></view>
    <view v-else-if="!isTopLevel && length <= 1 && !!info.spouse_val && !info.isHave"
          class="isTopLevel iconfont"
          :style="{
            width: !!info.spouse_val && !info.isHave ? 'calc(50% - 50rpx)' : '0%',
            left:'54rpx'
          }"
    ></view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view v-if="!isTopLevel && length > 1 && index != length - 1"
          class="isTopLevel"
          :style="{
            width: index == 0 && !!info.spouse_val && !info.isHave ? 'calc(100% - 50rpx)' : length - 1 == index && !!info.spouse_val && !info.isHave ? '10%' :  index == 0 || length - 1 == index ? '50%' : '100%',
          }"
          :class="{
            isTopLevelLeft: index == 0,
            isTopLevelRight: length - 1 == index,
          }"
    ></view>
    <view v-else-if="!isTopLevel && length <= 1 && !!info.spouse_val && !info.isHave"
          class="isTopLevel"
          :style="{
            width: !!info.spouse_val && !info.isHave ? 'calc(50%)' : '0%',
            left:'0'
          }"
    ></view>
    <!-- #endif -->

    <view v-if="!isTopLevel && length > 1 &&  info.spouse_val.length > 1 && length - 1 == index"
          style="position: absolute;top: -4rpx;width: 100%;left: 0;background: #F5F5F5;height: 30rpx"
          class="123"
    >
    </view>

    <view style="position: relative" class="flex flex-column align-center">
      <view v-if="!isTopLevel && length > 1"
            class="isTopLevel"
            :style="{
              width: '50%',
            }"
            :class="{
              isTopLevelLeft: index == 0,
              isTopLevelRight: length - 1 == index,
            }"
      ></view>
      <view v-if="!isTopLevel"
            class="childrens"
            :style="{
              left: '50%',
            }"
      ></view>
      <view v-if="index == 0 && !!info.spouse_val && !info.isHave"
            style="position: absolute;background: #F5F5F5;top: -4rpx;left: 0;width: calc(48% + 1rpx);height: 30rpx;z-index:5;"
      >
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view v-if="length - 1 == index && !isTopLevel && length > 1"
            style="position: absolute;background: #F5F5F5;top: -4rpx;left: calc(38% + 16rpx);width: 100rpx;height: 30rpx;z-index:5;"
      >
      </view>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <view v-if="length - 1 == index && !isTopLevel && length > 1"
            style="position: absolute;background: #F5F5F5;top: -4rpx;left: calc(35.8% + 16rpx);width: 100rpx;height: 30rpx;z-index:5;"
      >
      </view>
      <!-- #endif -->

      <view :id="`male_${info.id}`"
            class="characterCard flex flex-column align-center z_10"
            style="position: relative"
            :style="{
              background: isOwnFlag ? '#6EA0FC' : info.sex == 1 ? '#6EA0FC' : '#FC6F6F',
              marginRight:!!info.spouse_val && !info.isHave ?'6rpx':'0',
              justifyContent:!is_simple ? 'flex-start':'center',
            }"
            :class="{
            cardClass:isOwnFlag,
            'items-center':isOwnFlag,
            'justify-center':isOwnFlag
          }"
            @click.stop="addMember(info)"
      >
        <template v-if="isOwnFlag">
          <view class="title">点击</view>
          <view class="title">添加</view>
        </template>
        <template v-else>
          <view class="avatar"
                :style="{
                  background: info.sex == 1 ? '#6EA0FC' : '#FC6F6F',
                }"
                v-if="!is_simple"
          >
            <!-- #ifdef H5 -->
            <image v-if="!!info.head && !is_simple" lazy-load
                   :src="info.head.indexOf('http') != -1 ? `${info.head}?x-oss-process=image/format,jpg/quality,Q_80` : `${nc_image}${info.head}?x-oss-process=image/format,jpg/quality,Q_80`"
                   :class="show_die_gray == 1&& !!info.is_alive && info.is_alive != 1 ? 'black-and-white' : ''"
                   class="avatar_image"
            ></image>
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <image v-if="!!info.head && !is_simple" lazy-load
                   :src="info.head.indexOf('http') != -1 ? `${info.head}?x-oss-process=image/format,jpg/quality,Q_80` : `${nc_image}${info.head}?x-oss-process=image/format,jpg/quality,Q_80`"
                   class="avatar_image"
                   :class="show_die_gray == 1&& !!info.is_alive && info.is_alive != 1 ? 'black-and-white' : ''"
            ></image>
            <!-- #endif -->
            <!--            <image v-if="info.head" lazy-load-->
            <!--                   :src="info.head.indexOf('http') != -1 ? info.head : `${nc_image}${info.head}`"-->
            <!--                   class="avatar_image"></image>-->
          </view>
          <view class="remark flex align-center justify-center"
                style="margin-top: 3.84rpx;text-align: center"
                :style="{
                    fontSize:info.surname.length + info.name.length == 6 ? `${is_simple == 1 ? 36 : 20}rpx` : info.surname.length + info.name.length == 5 ? `${is_simple == 1 ? 42 : 24}rpx` :info.surname.length + info.name.length == 4 ? `${is_simple == 1 ? 46 : 28}rpx` : `${is_simple == 1 ? 48 : 32}rpx`,
                    lineHeight:info.surname.length + info.name.length == 6 ? `${is_simple == 1 ? 39 : 24}rpx` :info.surname.length + info.name.length == 5 ? `${is_simple == 1 ? 44 : 28}rpx` :info.surname.length + info.name.length == 4 ? `${is_simple == 1 ? 48 : 30}rpx` : `${is_simple == 1 ? 50 : 36}rpx`,
                }"
          >
            <view>{{ info.surname || '' }}{{ info.name || '' }}</view>
            <view class="guanxi flex align-center justify-center" v-if="is_init == 1 && is_create == 1">
              {{ info.gxname }}
            </view>
          </view>
        </template>
        <view style="position: absolute;top: 222rpx;left: 20rpx"
              v-if="!!isTopLevel && (info.children.length <= 0 && info.spouse_val.length <= 0 )">
          <image :src="`${IMG_URL}/index/tip_genealogy_logo.png`" class="wh_120 hW_103"></image>
        </view>
      </view>
      <view style="background: #FFC748;"
            class="flex flex-column align-center justify-center hW_80 wh_100 triangle mt_25"
            v-if="genealogicalRanking == treeInfo.top_list.shi_count && info.has_children != 0"
            @click.stop="clickToExpand(info)"
      >

        <view class="iconfont icon-ic_down2 fs_20 fw_500 color_FFFFFF"></view>
        <view class="fs_20 fw_500 color_FFFFFF mt_5">
          点击展开
        </view>
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view :class="{
              children:!!info.children && info.children.length > 0,
            }"
            :style="{
              top: isTopLevel ? '50%' : '50%',
              left:!!info.children && info.children.length > 0 && info.spouse_val.length == 1 ? '100%' : '50%',
              height:isTopLevel ? 'calc(51% + 8rpx)' : 'calc(51% + 16rpx)'
            }"
      ></view>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <view :class="{
              children:!!info.children && info.children.length > 0,
            }"
            :style="{
              top: isTopLevel ? '50%' : '50%',
              left:!!info.children && info.children.length > 0 && info.spouse_val.length == 1 ? '100%' : '50%',
              height:isTopLevel ? 'calc(51% + 8rpx)' : 'calc(57.5% + 2rpx)'
            }"
      ></view>
      <!-- #endif -->
    </view>
    <view v-for="(item,index) in info.spouse_val"
          :key="index"
          class="flex flex-column align-center"
          style="position: relative"
    >
      <view class="wifeClass"
            v-if="!!info.spouse_val && !info.isHave"
            :style="{
              width:info.spouse_val.length - 1 == index ? '50%' : '100%'
            }"
      ></view>
      <view style="position: relative">
        <view :id="`womale_${item.id}`" v-if="!!info.spouse_val && !info.isHave"
              class="characterCard flex flex-column align-center z_10"
              :style="{
                background: isOwnFlag ? '#6EA0FC' : item.sex == 1 ? '#6EA0FC' : '#FC6F6F',
                marginLeft:'6rpx',
                justifyContent:!is_simple ? 'flex-start':'center',
              }"
              :class="{
                cardClass:isOwnFlag,
                'items-center':isOwnFlag,
                'justify-center':isOwnFlag
              }"
              @click.stop="addMember(item)"
        >
          <template v-if="isOwnFlag">
            <view class="title">点击</view>
            <view class="title">添加</view>
          </template>
          <template v-else>
            <view class="avatar"
                  :style="{
                    background: item.sex == 1 ? '#6EA0FC' : '#FC6F6F'
                  }"
                  v-if="!is_simple"
            >
              <!-- #ifdef H5 -->
              <image lazy-load v-if="!!item.head && !is_simple"
                     :src="item.head.indexOf('http') != -1 ? `${item.head}?x-oss-process=image/format,jpg/quality,Q_80` : `${nc_image}${item.head}?x-oss-process=image/format,jpg/quality,Q_80`"
                     class="avatar_image"
                     :class="show_die_gray == 1 && !!item.is_alive && item.is_alive != 1 ? 'black-and-white' : ''"
              ></image>
              <!-- #endif -->
              <!-- #ifndef H5 -->
              <image lazy-load v-if="!!item.head && !is_simple"
                     :src="item.head.indexOf('http') != -1 ? `${item.head}?x-oss-process=image/format,jpg/quality,Q_80` : `${nc_image}${item.head}?x-oss-process=image/format,jpg/quality,Q_80`"
                     class="avatar_image"
                     :class="show_die_gray == 1&& !!item.is_alive && item.is_alive != 1 ? 'black-and-white' : ''"
              ></image>
              <!-- #endif -->
              <!--              <image lazy-load :src="item.head.indexOf('http')!= -1 ? item.head : `${nc_image}${item.head}`"-->
              <!--                     class="avatar_image"-->
              <!--              ></image>-->
            </view>
            <view class="remark flex align-center justify-center"
                  style="margin-top: 3.84rpx;text-align: center"
                  :style="{
                    fontSize:item.surname.length + item.name.length == 6 ? `${is_simple == 1 ? 36 : 20}rpx` : item.surname.length + item.name.length == 5 ? `${is_simple == 1 ? 42 : 24}rpx` :item.surname.length + item.name.length == 4 ? `${is_simple == 1 ? 46 : 28}rpx` : `${is_simple == 1 ? 48 : 32}rpx`,
                    lineHeight:item.surname.length + item.name.length == 6 ? `${is_simple == 1 ? 39 : 24}rpx` :item.surname.length + item.name.length == 5 ? `${is_simple == 1 ? 44 : 28}rpx` :item.surname.length + item.name.length == 4 ? `${is_simple == 1 ? 48 : 30}rpx` : `${is_simple == 1 ? 50 : 36}rpx`,
                  }"
            >
              <view>{{ item.surname || '' }}{{ item.name || '' }}</view>
              <view class="guanxi flex align-center justify-center" v-if="is_init == 1 && is_create == 1">
                {{ item.gxname }}
              </view>
            </view>
          </template>
        </view>
        <!--        <view>{{ item.has_children }}</view>-->
        <!-- #ifdef MP-WEIXIN -->
        <view v-if="!!item.children && item.children.length > 0"
              :class="{
              children_value:!!item.children && item.children.length > 0,
            }"
              :style="{
              top: isTopLevel ? '96%' : '94%',
            }"
        ></view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view v-if="!!item.children && item.children.length > 0"
              :class="{
              children_value:!!item.children && item.children.length > 0,
            }"
              :style="{
              top: isTopLevel ? '94%' : '94%',
            }"
        ></view>
        <!-- #endif -->
      </view>
      <view v-if="!!item.children && item.children.length > 0" style="margin-top: 12rpx;">
        <s-recursive-list :children="item.children" v-if="!!item.children && item.children.length > 0" :id="id"
                          :is_create="is_create" :is_init="is_init"
                          :generation="generation + 1"
                          :genealogicalHead="genealogicalHead"
                          :centerId="centerId"
                          :endId="endId"
                          @openAddPersonnelPopup="openAddPersonnelPopup"
                          :genealogicalRanking="genealogicalRanking + 1"
                          :zibei_List="zibei_List"
                          :show_die_gray="show_die_gray"
                          :is_simple="is_simple"
                          :is_first="is_first"
                          :options="options"
                          :center_list="center_list"
                          :treeInfo="treeInfo"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .cardClass {
    width: 100rpx !important;
    height: 260rpx !important;
    background: #6EA0FC !important;
    border-radius: 10rpx 10rpx 10rpx 10rpx !important;
    position: relative;
  }

  .characterCard {
    margin-top: 14rpx;
    width: 100rpx;
    height: 260rpx;
    background: #FC6F6F;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    position: relative;
  }

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22.5rpx;
    color: #FFFFFF;
  }

  .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20rpx;
    color: #FFFFFF;
  }

  .avatar {
    width: 100rpx;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    overflow: hidden;

    .avatar_image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .remark {
    width: 32rpx;
    height: 144rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 36rpx;
    color: #FFFFFF;
    word-break: break-all;
    position: relative;
  }

  .children {
    width: 3rpx;
    height: calc(58% + 2rpx);
    background: #707070;
    position: absolute;
    top: 65.25rpx;
    left: 50%;
    transform: translateX(-50%);
    line-height: 24rpx;
    z-index: 5;
  }

  .wifeClass {
    position: absolute;
    left: -20rpx;
    top: 136rpx;
    //transform: translateY(-50%);
    width: 50%;
    height: 3rpx;
    background: #707070;
  }

  .isTopLevel {
    width: 100%;
    height: 3rpx;
    background: #707070;
    position: absolute;
    top: 0;
  }

  .isTopLevelLeft {
    right: 0;
  }

  .isTopLevelRight {
    left: 0;
  }

  .childrens {
    position: absolute;
    width: 3rpx;
    height: 144rpx;
    top: -0%;
    left: 50%;
    transform: translateX(-50%);
    background: #707070;
  }

  .guanxi {
    width: 20rpx;
    height: 90rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20rpx;
    line-height: 24rpx;
    color: #FFFFFF;
    position: absolute;
    left: -20rpx;
    top: 50%;
    transform: translateY(-50%);
    //overflow: hidden;
  }

  .children_value {
    width: 1px;
    height: 11%;
    background: #707070;
    position: absolute;
    top: 65.25rpx;
    left: 50%;
    transform: translateX(-50%);
    line-height: 24rpx;
  }

  .black-and-white {
    filter: grayscale(100%);
  }

  .triangle {
    position: relative;
    border-radius: 8rpx;
  }

  .triangle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20rpx solid transparent;
    border-right: 20rpx solid transparent;
    border-bottom: 20rpx solid #FFC748;
    top: -18rpx;
    left: 50%;
    transform: translateX(-50%);
  }
</style>